<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <link rel="stylesheet" href="/js/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    
</head>
<body>
<div class="container">
    <div class="row">
        <h2>文件上传</h2>
        <form id="upload-form">
            <input id="file-input" type="file" name="file" style="display: none;">
            <button id="choose-btn" type="button" class="btn btn-default">选择文件</button>
            <button id="upload-btn" type="submit" class="btn btn-primary disabled">上传文件</button>
        </form>
    </div>
    <br>
    <div class="row">
        <table id="file-table" class="table table-bordered table-striped table-hover table-condensed">
            <thead>
            <tr>
                <th>文件名</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>
<script src='/js/jquery-3.6.4.min.js'></script>
<script src="/js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script>
    var fileTableBody = $("#file-table tbody");

    // 获取文件列表并显示在表格中
    function getFileList() {
        $.getJSON("/upload/list", function (result) {
            if (result.res=='ok') {
                var files = result.data;
               
                //console.log(files);
                fileTableBody.empty();
                if (files.length > 0) {
                    var i=0;
                    for(i=0;i<files.length;i++){
                    	var row = $("<tr>");
                        $("<td>").text(files[i].name).appendTo(row);
                        var deleteBtn = $("<button>").addClass("btn btn-danger")
                            .text("删除")
                            .data("fileName", files[i].name)
                            .appendTo($("<td>").appendTo(row));
                        deleteBtn.click(deleteFile);
                        row.appendTo(fileTableBody);
                    }
                   
                } else {
                    fileTableBody.append($("<tr>").append($("<td colspan='3'>").text("没有文件")));
                }
            }
        });
    }

    // 删除文件
    function deleteFile() {
        var fileName = $(this).data("fileName");
        if (confirm("确定要删除文件" + fileName + "吗？")) {
            $.post("/upload/delete", "{'name':'"+fileName+"'}", function (result) {
                if (result.res=='ok') {
                    getFileList();
                } else {
                    alert('删除失败');
                }
            });
        }
    }

    $(function () {
        // 显示文件列表
        getFileList();

        // 选择文件
        $("#choose-btn").click(function () {
            $("#file-input").click();
        });
        $("#file-input").change(function () {
            var files = $(this)[0].files;
            if (files.length > 0) {
                $("#upload-btn").removeClass("disabled");
            } else {
                $("#upload-btn").addClass("disabled");
            }
        });

        // 上传文件
        $("#upload-form").submit(function (event) {
            event.preventDefault();
            $.ajax({
                url: "/upload/upload",
                type: "POST",
                data: new FormData(this),
                processData: false,
                contentType: false,
                success: function (result) {
                    if (result.res=='ok') {
                        alert('上传成功')
                        $("#upload-btn").addClass("disabled");
                        getFileList();
                    } else {
                        alert(result.data);
                        $("#upload-btn").addClass("disabled");
                    }
                }
            });
        });
    });
</script>
</body>
</html>
